{extend name="$index_style_layout" /}

<!--SEO相关-->
{block name="head_title"}{$webdb.mseo_title?($webdb.mseo_title).'大分类':$webdb.seo_title}{/block}
{block name="head_keword"}{$webdb.mseo_keyword?:$webdb.seo_keyword}{/block}
{block name="head_description"}{$webdb.mseo_description?:$webdb.seo_description}{/block}

{block name="body_content"}
<style type="text/css">
.wap_list_2sort{
	display:table;
}
.wap_list_2sort li{
	background:#d2b07d;
	color:#FFF;
	padding:2px 10px;
	margin:0px 4px 8px 4px;
	border-radius:3px;
	float:left;
	font-size:13px;
}
.wap_list_2sort .sort_ck{
	background: #EB3528;
}
</style>

    <link rel="stylesheet" type="text/css" href="https://x1.php168.com/public/static/qun_style/booking/wapmyshop.css">
    <link rel="stylesheet" type="text/css" href="https://x1.php168.com/public/static/qun_style/booking/common.css">
	<!--上面两行是避免有的用户下面的CSS文件不存在-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/qun_style/booking/wapmyshop.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/qun_style/booking/common.css">
     
    <div class="WellCome">图片仅供参考 请以实物为准<span onclick="$('.WellCome').fadeOut()"></span></div>
    <div class="MainContainer">
        <ul class='listmysort'>
            <li style="text-align: center;"><a class='ck' data-id="0">全部</a></li>
			{volist name=":sort_config('',0,true)" id="rs"}
            <li style="text-align: center;"><a href="javascript:;" data-id="{$rs.id}">{$rs.name}</a></li>
			{/volist}
        </ul>
		<div class="ShowMyShop">
			<ul class="wap_list_2sort">
				 <!--<li>子栏目一</li><li class="sort_ck">子栏目二</li>-->
			</ul>
			<ul class="wap_shop_sort">
			{qb:tag name="wap_shop_sort" js="wap_shop_sort" type="shop" rows="7" where="fid=$fid"}
            <div class='list list{$rs.id}'><!--做风格关键的地方list{$rs.id}-->
                <dl>
                    <dt><a href="javascript:showImgs('{$rs.picurl}')"><img src='{$rs.picurl}' onerror="this.src='__STATIC__/images/nopic.png'"/></a></dt>
                    <dd>
                        <div><a href="javascript:showImgs('{$rs.picurl}')">{$rs.title}</a>
                        </div>
                        <div style='color:#888;font-size:14px;' onclick='show_html($(this))'><!--详细介绍--></div>
                        <ul>
                            <li>&yen;{$rs.price}</li>
                        </ul>
                    </dd>
                </dl>
				{if $rs.type1!=''&&$rs.type1!='[]'}
				<!--存在颜色尺寸的情况--> 
						{php}
						$field_array=get_field($rs['mid'],'shop');
						$array1=fun('shop@type_get_title_price','type1',$rs);
						$array2=fun('shop@type_get_title_price','type2',$rs);
						$array3=fun('shop@type_get_title_price','type3',$rs);
						{/php}
					<ul class="more-type{$rs.id}" style="display:none;"><!--做风格关键的地方more-type{$rs.id}-->
						<!--做风格关键的地方JS中要用到 ul li 元素-->
						<div class='types'>
							<ul>
							{volist name="array1" id="vs"}
								<li onClick='choose_type({$i},$(this),1)' {if $i==1}class='ck'{/if}>{$vs.title}</li>
							{/volist}
							</ul>

							<ul>
							{volist name="array2" id="vs"}
								<li onClick='choose_type({$i},$(this),2)'>{$vs.title}</li>
							{/volist}
							</ul>

							<ul>
							{volist name="array3" id="vs"}
								<li onClick='choose_type({$i},$(this),3)'>{$vs.title}</li>
							{/volist}
							</ul>
						</div>
					</ul>
					<!--做风格关键的地方change及changetype-->
					<div class='change'><span onclick='choose_show_type({$rs.id})' class='changetype'>选择类型</span></div>
				{else /}
				<!--不存在颜色尺寸的情况-->
				<!--做风格关键的地方change及change0是隐藏另外两个元素-->
				<div class='change change0'>
					<span onclick='addthis({$rs.id})' class='add'></span>
                    <div><input type='text' value='0' /></div>
                    <span onclick='removethis({$rs.id})' class='remove'></span>
                </div>
               {/if}
            </div>
            <div class='listimgs{$rs.id}'>
                <input type='hidden' value='{$rs.picurl}'>
            </div> 
			{/qb:tag}
			</ul>
        </div>
    </div>
    <!--div class="ShowMore"><span>查看更多</span></div-->
	<!--做风格关键的地方 totalCar num price 里边还有span元素-->
    <div class="totalCar">
        <ul>
			<li class='num'><span>0</span></li>
			<li class='price'>总价：&yen;<span>0</span></li>
			<li class='go'><a href="javascript:;checkwapjoin()">选好了</a></li>
        </ul>
    </div>

	<!--弹层显示详细介绍-->
    <div class="Show_html_box">
        <div class="BackBox" onClick="$('.Show_html_box').fadeOut();"></div>
        <ul>
            <ol>这里是要显示的内容</ol>
            <li><span onClick="$('.Show_html_box').fadeOut();">关闭</span>
            </li>
        </ul>
    </div>
	
	<!--弹层选择产品的类型尺寸颜色大小-->
    <div class="ShowChangeType">
        <div class="BackBox" onClick="$('.ShowChangeType').fadeOut();"></div>
        <div class="ContBox">
			<!--做风格关键的地方 class="type" -->
			<div class="type"><!--这是产品的类型尺寸颜色大小--></div>
			<div class='changes'>
				<span class='remove' onClick='removetype()'><br/></span>
				X<input type='text'  value='1' class="num" />
				<input type="hidden" value='1' class="type1">
				<input type="hidden" value='0' class="type2">
				<input type="hidden" value='0' class="type3">
				<input type="hidden" value='0' class="id">
				<span class='add' onClick='addtype()'><br/></span>
			</div>
			<div class='butter'><span onClick='choose_end()'>确定</span><em onClick="$('.ShowChangeType').fadeOut();">取消</em></div>
        </div>
    </div>

<!-----------颜色尺寸大小选择开始----------------->
<script type="text/javascript">
//显示商品的颜色尺寸大小
function choose_show_type(id) {
	$('.ShowChangeType .ContBox .type').html( $(".more-type"+id).html() );
	$('.ShowChangeType').fadeIn();
	//重置各项参数
	$('.ShowChangeType input.id').val(id);	
	$('.ShowChangeType input.type2').val(0);
	$('.ShowChangeType input.type3').val(0);
	$('.ShowChangeType input.num').val(1);
	
	if(shop_db[id].type1&&parseInt(shop_db[id].type1)>0){
		$(".ShowChangeType .ContBox .type ul").eq(0).find("li").removeClass("ck");
		$(".ShowChangeType .ContBox .type ul").eq(0).find("li").eq(shop_db[id].type1-1).addClass("ck");
		$('.ShowChangeType input.type1').val(shop_db[id].type1);
	}
	if(shop_db[id].type2&&parseInt(shop_db[id].type2)>0){
		$(".ShowChangeType .ContBox .type ul").eq(1).find("li").removeClass("ck");
		$(".ShowChangeType .ContBox .type ul").eq(1).find("li").eq(shop_db[id].type2-1).addClass("ck");
		$('.ShowChangeType input.type2').val(shop_db[id].type2);
	}
	if(shop_db[id].type3&&parseInt(shop_db[id].type3)>0){
		$(".ShowChangeType .ContBox .type ul").eq(2).find("li").removeClass("ck");
		$(".ShowChangeType .ContBox .type ul").eq(2).find("li").eq(shop_db[id].type3-1).addClass("ck");
		$('.ShowChangeType input.type3').val(shop_db[id].type3);
	}
	if(parseInt(shop_db[id].num)>1){
		$('.ShowChangeType input.num').val(shop_db[id].num);
	}
}

//选择商品的颜色尺寸大小
function choose_type(num, objs, type) {
	$('.ShowChangeType input.type'+type).val(num);
	objs.siblings().removeClass('ck');
	objs.addClass('ck');
}

//确认选择颜色尺寸大小
function choose_end() {
	var carnum = $('.ShowChangeType input.num').val();
	var type_1 = $('.ShowChangeType input.type1').val();
	var type_2 = $('.ShowChangeType input.type2').val();
	var type_3 = $('.ShowChangeType input.type3').val();
	var id = $('.ShowChangeType input.id').val();
	if($(".more-type"+id+" ul").eq(1).find("li").length>0){
		if(parseInt(type_2)<1){
			layer.alert("第2项必须要选择!");
			return ;
		}		
	}else{
		type_2 = '';
	}
	if($(".more-type"+id+" ul").eq(2).find("li").length>0){
		if(parseInt(type_3)<1){
			layer.alert("第3项必须要选择!");
			return ;
		}		
	}else{
		type_3 = '';
	}

	if(carnum==0){
		$.get("{:urls('shop/car/delete')}?shopid="+id+"&" + Math.random(),function(res){
			if(res.code==0){			
				layer.msg('已从购物车移除',{time:1000});
				$('.list' + id + ' .change span').html('请选择类型');
				$('.ShowChangeType').fadeOut();
				total_car();
			}else{
				layer.alert('提示:'+res.msg);
			}
		});
	}else{
		$.get("{:urls('shop/car/add')}?shopid="+id+"&num=" + carnum + "&type1=" + type_1 + "&type2=" + type_2 + "&type3=" + type_3 + "&" + Math.random(),function(res){
			if(res.code==0){			
				layer.msg('成功加入购物车',{time:1000});
				//$('.list' + id + ' .change span').html('X'+carnum);
				$('.ShowChangeType').fadeOut();
				total_car();
			}else{
				layer.alert('提示:'+res.msg);
			}
		});
	}
}

//颜色尺寸大小选择数量的增加
function removetype() {
	var carnum = $('.ShowChangeType input.num').val();
	carnum--;
	if (carnum < 0) {
		layer.alert("不能为负数");
		carnum = 0;
	}
	$('.ShowChangeType input.num').val(carnum);
}

//颜色尺寸大小选择数量的减少
function addtype() {
	var carnum = $('.ShowChangeType input.num').val();
	carnum++;
	$('.ShowChangeType input.num').val(carnum);
}
</script>
<!-----------颜色尺寸大小选择结束----------------->



<script type="text/javascript">
var total_num = 0;	//总件数
var shop_db = {};	//购物车详细情况

//跳转到购物车结算页
function checkwapjoin() {
	if (total_num < 1) {
		layer.alert("您还没有添加任何商品！");
	} else {
		window.location.href = "{:urls('car/index')}";
	}
}

//统计购物里的数据
function total_car() {
	$.get("{:urls('car/getcar')}?" + Math.random(), function (res) {
		if(res.code==0){
			total_num = res.data.num
			$('.totalCar .num span').html(res.data.num);
			$('.totalCar .price span').html(res.data.money);
			//赋值,方便页面显示调用
			$.each(res.data.shop,function(i,rs){
				if(rs._car_.type1>0){
					rs._car_._type1 = rs._type1;	//型号尺寸详细名称
				}else{
					rs._car_._type1 = '';
				}
				if(rs._car_.type2>0){
					rs._car_._type2 = rs._type2;	//型号尺寸详细名称
				}else{
					rs._car_._type2 = '';
				}
				if(rs._car_.type3>0){
					rs._car_._type3 = rs._type3;	//型号尺寸详细名称
				}else{
					rs._car_._type3 = '';
				}
				shop_db[rs.id] = rs._car_;	//每个商品在购物车里的记录,选择了哪些
				
				//选择那里重新赋个值,代表已选择了哪些
				if(rs._car_._type1==''){
					$('.list' + rs.id + ' .change').removeClass("change0");
					$('.list' + rs.id + ' input').val(rs._car_.num);
				}else{
					$(".list"+rs.id+" .changetype").html(rs._car_._type1+' '+rs._car_._type2+' '+rs._car_._type3+' 共'+rs._car_.num+'份');
				}
			});
		}                
   });
}

//标签JS回调函数
function wap_shop_sort(res){
	total_car();
}


//添加单品
function addthis(id) {
	var thisnum = $('.list' + id + ' input').val();
	thisnum++;
	$('.list' + id + ' input').val(thisnum);
	add_shop_car(id, thisnum);
}

//单品提交到购物车
function add_shop_car(id, num) {
	if (num == 0) {
		$('.list' + id + ' .change').addClass("change0");	//隐藏一些选项
	} else {
		$('.list' + id + ' .change').removeClass("change0");
	}
	
	if(num==0){
		$.get("{:urls('car/delete')}?shopid="+id+"&" + Math.random(),function(res){
			if(res.code==0){			
				layer.msg('已从购物车移除',{time:1000});
				total_car();
			}else{
				layer.alert('提示:'+res.msg);
			}
		});
	}else{
		$.get("{:urls('car/add')}?shopid="+id+"&num="+num,function(res){
			if(res.code==0){			
				layer.msg('成功加入购物车',{time:1000});
				total_car();
			}else{
				layer.alert('提示:'+res.msg);
			}
		});
	}	
}

//单品减少
function removethis(id) {
	var thisnum = $('.list' + id + ' input').val();
	thisnum--;
	if (thisnum < 0) {
		layer.alert("不能为负数");
		thisnum = 0;
	}
	$('.list' + id + ' input').val(thisnum);
	//$('.list'+id+' .change').attr("id","change"+thisnum);
	add_shop_car(id, thisnum);
}

//显示详细介绍
function show_html(objs) {
	this_html = objs.html();
	if (this_html != '') {
		$('.Show_html_box ul ol').html(this_html);
		$('.Show_html_box').fadeIn();
	}
}


var page = 1;
var check_showMore = 1;
var fid = 0;
$(document).ready(function () {
	$(window).scroll(function () {
		var scroll_Height = $(window).scrollTop();
		if (($('body').height() - scroll_Height) < 1300 && check_showMore == 1) {
			ShowMoreArtic();
		}
	});
});

//加载商品数据
function ShowMoreArtic() {
	page++;
	check_showMore = 0;
	var url = "{qb:url name='wap_shop_sort' /}" + page;
	if(fid>0){
		url += "&fid="+fid;
	}
	$.get(url, function (res) {
		if (res.data!='') {
			$('.wap_shop_sort').append(res.data);
			total_car();
			layer.closeAll();
			check_showMore = 1;
		} else {
			layer.msg("没有更多商品了！");
		}
	});
}

//一级分类点击事件
$(".listmysort a").click(function(){
	$(".listmysort a").removeClass("ck");
	$(this).addClass("ck");
	fid = $(this).data('id');
	page = 0;
	$('.wap_shop_sort').html('');
	layer.msg('加载中,请稍候...',{time:1000});
	ShowMoreArtic();
	get_2sort(fid);
});

//点击二级分类
function choose_2sort(id,obj){
	fid = id;
	page = 0;
	obj.addClass('sort_ck').siblings().removeClass('sort_ck');
	$('.wap_shop_sort').html('');
	layer.msg('加载中,请稍候...',{time:1000});
	ShowMoreArtic();
}

//获取二级分类名称
function get_2sort(id){
	$(".wap_list_2sort").html('');
	if(id<1){
		return ;
	}	
	$.get("{:urls('wxapp.sorts/index')}?fid="+id,function(res){
		if(res.code==0){
			var str = '';
			res.data.forEach((rs)=>{
				str += `<li onclick="choose_2sort(${rs.id},$(this))">${rs.name}</li>`;
			});
			$(".wap_list_2sort").html(str);
		}
	});
}


function showImgs(id) {
	/*
	var pics = new Array();
	var i = 0;
	$('.listimgs' + id + ' input').each(function () {
		pics[i] = $(this).val();
		i++;
	});
	var thispic = pics[0];
	wx.previewImage({
		current: thispic,
		urls: pics
	});*/
}

</script>

{/block}

{block name="body_Footcont"} {/block}